<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>3-关系图</title>
		<script src="../js/echarts/echarts.js"></script>
	</head>
	<body>
		<h1>简单的图表</h1>
		<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
		<center id="main" style="width: 100%;height: 800px;"></center>
		<script type="text/javascript">
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('main'));

			let data = {
				nodes: 

[
	{
		"name":"附件表",
		"category":0
	},
	{
		"name":"文件名称",
		"category":1
	},
	{
		"name":"附件类型",
		"category":1
	},
	{
		"name":"附件",
		"category":1
	}
]



,

				links: 
				
[
	{
		"source":"附件表",
		"target":"文件名称"
	},
	{
		"source":"附件表",
		"target":"附件类型"
	},
	{
		"source":"附件表",
		"target":"附件"
	}
]



			}

			const color1 = '#006acc';
			const color2 = '#ff7d18';
			const color3 = '#10a050';

			data.nodes.forEach(node => {
				if (node.category === 0) {
					node.symbolSize = 100;
					node.itemStyle = {
						color: color1
					};
				} else if (node.category === 1) {
					node.symbolSize = 100;
					node.itemStyle = {
						color: color2
					};
				}
			});

			data.links.forEach(link => {
				link.label = {
					align: 'center',
					fontSize: 12
				};

				if (link.name === '参股') {
					link.lineStyle = {
						color: color2
					}
				} else if (link.name === '董事') {
					link.lineStyle = {
						color: color1
					}
				} else if (link.name === '法人') {
					link.lineStyle = {
						color: color3
					}
				}
			});

			let categories = [{
					name: '核心',
					itemStyle: {
						color: color1
					}
				},
				{
					name: '成员',
					itemStyle: {
						color: color2
					}
				}
			]
			// 指定图表的配置项和数据
			var option = {
				title: {
					text: '知识图谱',
				},
				legend: [{
					// selectedMode: 'single',
					data: categories.map(x => x.name),
					// icon: 'circle'
				}],
				series: [{
					type: 'graph',
					layout: 'force',
					symbolSize: 58,
					draggable: true,
					roam: true,
					focusNodeAdjacency: true,
					categories: categories,
					edgeSymbol: ['', 'arrow'],
					// edgeSymbolSize: [80, 10],
					edgeLabel: {
						normal: {
							show: false, // 不显示连线文字描述
							textStyle: {
								fontSize: 20
							},
							formatter(x) {
								return x.data.name;
							}
						}
					},
					label: {
						show: true
					},
					force: {
						repulsion: 2000,
						edgeLength: 120,
						layoutAnimation: true // 开/关动画效果
					},
					animationDuration: (idx) => {
						console.log("idx -> "+ idx)
						return idx * 1
					},
					animationEasing: "linear",
					data: data.nodes,
					links: data.links
				}]
			}
			console.log(echarts)
			console.log(echarts.config)
			console.log(echarts.version)
			// var ecConfig = echarts;
			function focus(param) {
				var data = param.data;
				var links = option.series[0].links;
				var nodes = option.series[0].nodes;
				if (
					data.source !== undefined &&
					data.target !== undefined
				) { //点击的是边
					var sourceNode = nodes.filter(function(n) {
						return n.name == data.source
					})[0];
					var targetNode = nodes.filter(function(n) {
						return n.name == data.target
					})[0];
					console.log("选中了边 " + sourceNode.name + ' -> ' + targetNode.name + ' (' + data.weight + ')');
				} else { // 点击的是点
					console.log("选中了" + data.name + '(' + data.value + ')');
				}
			}
			// myChart.on(ecConfig.EVENT.CLICK, focus)
			// myChart.on('click', focus)

			// myChart.on(ecConfig.EVENT.FORCE_LAYOUT_END, function () {
			//     console.log(myChart.chart.force.getPosition());
			// });

			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);
		</script>

	</body>
</html>
